在最近开发的 ant-violet 开源项目中，使用的是 Vue-cli 自带的测试框架。但是发现在所有跟样式有关的测试用例都无法通过。因为它并不类似于无头浏览器，而是存在于虚拟内存之中。

出现的问题

在如下 button.spec.js 单元测试用例当中，关于 icon 默认的 order 的测试用例无法进行测试，因为它涉及到了样式。前面已经提到由于它处于虚拟内存之中。因此只要进行单元测试，就会出现以下报错。

1
2
3
4
5
6
7
8
9
10
11
12
// button里面的icon样式相关的测试用例
it('icon 默认的 order 是 1', () => {
    const wrapper = mount(Button, {
      attachToDocument: true,
      propsData: {
        icon: 'settings',
      }
    })
    const vm = wrapper.vm
    const icon = vm.$el.querySelector('svg')
    expect(getComputedStyle(icon).order).to.eq('1')
})

解决方案

使用 Karma 打开浏览器进行测试。

配置 package.json

在 package.json 中添加依赖 Karma 相关的配置，如下图。

安装依赖

使用如下命令安装之前 package.json 中添加的依赖。

1
yarn add -D karma karma-chrome-launcher karma-mocha karma-sourcemap-loader karma-spec-reporter karma-webpack

创建 karma.conf.js

在 Vue Cli 3 的官方文档 webpack 相关 章节中，可以查询到 Vue Cli 3 将 webpack.config.js 藏到了一个地方，即 /node_modules/@vue/cli-service/webpack.config.js。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var webpackConfig = require("@vue/cli-service/webpack.config.js")

module.exports = function(config) {
  config.set({
    frameworks: ["mocha"],
    files: ["tests/**/*.spec.js"],
    preprocessors: {
      "**/*.spec.js": ["webpack", "sourcemap"]
    },
    webpack: webpackConfig,
    reporters: ["spec"],
    browsers: ["ChromeHeadless"]
  })
}

总结

Vue Cli 3 自带测试框架

无法运行和样式相关的测试用例。因为它并不类似于无头浏览器，而是存在于虚拟内存之中。
这些和样式挂钩的测试用例属性，会被认为是 undefined，因为对于 Vue Cli 3 自带测试框架而言，这些属性本身就是不存在的。因此无法进行测试。

karma 测试运行器

使用 karma 测试运行器之后，关于样式相关的测试用例可以正常进行运行。但也必须要添加 attachToDocument: true, 属性将元素放置到 DOM 之中。

由于组件的样式相关属性也有单元测试的必要，所以我决定将 karma 测试运行器作为我的默认单元测试框架，因此还需要在 package.json 中设置 "test": "karma start --single-run",。以便 travis-ci 进行线上持续集成。